<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
    <title>Amazing Slider</title>
    
    <!-- Insert to your webpage before the </head> -->
    <script src="sliderengine/jquery.js"></script>
    <script src="sliderengine/amazingslider.js"></script>
    <script src="sliderengine/initslider-1.js"></script>
    <!-- End of head section HTML codes -->
    
</head>
<body>
<div style="margin:30px auto;max-width:600px;">
    
    <!-- Insert to your webpage where you want to display the slider -->
    <div id="amazingslider-1" style="display:block;position:relative;margin:16px auto 48px;">
        <ul class="amazingslider-slides" style="display:none;">
            <li><img src="images/Hydrangeas.jpg" alt="Hydrangeas" /></li>
            <li><img src="images/Jellyfish.jpg" alt="Jellyfish" /></li>
            <li><img src="images/Lighthouse.jpg" alt="Lighthouse" /></li>
            <li><img src="images/Penguins.jpg" alt="Penguins" /></li>
            <li><img src="images/Tulips.jpg" alt="Tulips" /></li>
        </ul>
        <ul class="amazingslider-thumbnails" style="display:none;">
            <li><img src="images/Hydrangeas-tn.jpg" /></li>
            <li><img src="images/Jellyfish-tn.jpg" /></li>
            <li><img src="images/Lighthouse-tn.jpg" /></li>
            <li><img src="images/Penguins-tn.jpg" /></li>
            <li><img src="images/Tulips-tn.jpg" /></li>
        </ul>
        <div class="amazingslider-engine" style="display:none;"><a href="http://amazingslider.com">jQuery Image Slideshow</a></div>
    </div>
    <!-- End of body section HTML codes -->
    
</div>
</body>
</html>